<template>
  <simple-layout title="通盈宝">
    <div class="product-main" :style="{height:mainHeight,background:'#F7F7F7'}">
<!--      产品信息基本 -->
      <div class="product-main-header">
        <img :src="productIfo.productUrl" alt="">
        <span class="product-main-header-info">
          <div>{{productIfo.productName}}</div>
        </span>
      </div>
<!--产品金额详情-->
      <div class="product-main-body">
        <div class="product-money-info">
            <div class="product-form-title">定存金额</div>
            <div class="mui-input-row">
                <label>¥</label>
                <input type="number" v-model="depositAmount" class="mui-input-clear" placeholder="请输入">
            </div>

        </div>
        <div class="product-money-info">
            <div class="product-form-title" @click="showDataList">产品期限 &nbsp;<van-icon name="arrow-down" size="10"/></div>
            <ul class="data-list" v-show="dataList">
                <li class="mui-table-view-cell" @click="changeData(180)">180天</li>
                <li class="mui-table-view-cell" @click="changeData(270)">270天</li>
                <li class="mui-table-view-cell" @click="changeData(360)">360天</li>
            </ul>
        <div class="mui-input-row" style="margin-top: 0.4rem;">
              <span style="font-size: 22px;">{{productData}}</span>&nbsp;天
         </div>
        </div>

        <!-- <div class="product-safe-info">
          <span><img src="../../assets/productinfo/fengxian@3x.png" alt="">低风险</span>
          <span>100元起购</span>
        </div> -->
      </div>

      <div style="height: 1rem; background: rgb(243, 241, 241);"></div>


<!--      产品亮点 -->

<!--      产品亮点 -->
      <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">定存记录</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">奖励记录</a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">收益记录</a>
            </li>
        </ul>
      </div>
    </div>
    </div>

    <div class="product-footer">
      <button class="ab-btn ab-btn-primary" @click="goSetPwd">定 存</button>
    </div>
  </simple-layout>
</template>


<script>
  import SimpleLayout from '../../components/SimpleLayout';
  export default {
    name: "productInfo",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        dataList: false,
        productData: 180,
        depositAmount: 0,
        productId: 0,
        productIfo: {
          url: "https://img.yzcdn.cn/vant/apple-1.jpg",
          productName: "通盈宝",
          productTip : "由江苏银行股份有限公司提供",
        },
        mainHeight: '',
      }
    },
    computed: {},
    watch: {},
    mounted: function () {

      this.productIfo = this.$route.query.product
      this.productData = this.productIfo.lockPeriod
      this.depositAmount = this.productIfo.depositAmount
      this.productId = this.productIfo.productId
      console.log(this.productId)
      this.mainHeight = `${ window.screen.height - 105}px`;
    },
    methods: {
      showDataList(){
        this.dataList = !this.dataList
      },
      changeData(day){
        this.productData = day;
        this.dataList = !this.dataList
      },
      goSetPwd(){
        if(this.depositAmount === 0 || this.productData === '' || this.productData === null || this.productData === undefined) {

              mui.confirm('','请设定定存金额',new Array('确定'));
        } else {
          if(this.productData === 0 || this.productData === '' || this.productData === null || this.productData === undefined){
              mui.confirm('','请设定产品期限',new Array('确定'));
            } else {
              let proct = {
                'productId': this.productIfo.productId,
                'productData': this.productData,
                'depositAmount': this.depositAmount
              }
                this.$router.push({ path: '/product/paypwd',query:{product:proct}})
            }
        }



      }

    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ab-btn.ab-btn-primary {
    margin-top: 8px;
    width: 80%;
    background: rgb(130, 130, 244);
    border-radius: 40px;
    height: 46px;
    font-size: 24px;
    color: #fff;
  }
  .product-footer{
    height: 60px;
    /*border: 1px solid;*/
    position: fixed;
    bottom: 0;
    width: 100%;
  }




  .product-lin{
    height: 4rem;
    line-height: 4rem;
    font-size: 24px;
    font-weight: bold;
    margin: 1rem;
  }
  .product-lin-info{
    display: flex;
    margin: 0 1rem 1rem;
  }
  .product-lin-info > img {
    width: 4rem;
    height: 4rem;
  }
  .product-explain {
    margin: 0 1rem;
  }
  .product-explain>div:first-child {
    color: #000;
    font-weight: bold;
    font-size: 20px;
    height: 2rem;
    line-height: 2rem;
  }


  /* 中间 */

  .product-money-info {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1ecec;
      background: #FFFFFF;
  }
  .product-money-info.l, .product-money-info.r {
    width: 49%;
    display: block;
  }
  .product-money-info.l>div:first-child, .product-money-info.r>div:first-child {
    color: #8c8686;
    font-size: 20px;
  }
  .product-money-info.l>div:last-child, .product-money-info.r>div:last-child {
    font-size: 34px;
    font-weight: bold;
    margin-top: 1.5rem;
  }
  .product-money-info.l>div:last-child{
    color: #ec3e3e;
  }
  .product-money-info.r>div:last-child{
    color: black;
  }
 .product-main-body  .product-form-title {
   font-size: 12px;
 }

.product-main-body .mui-input-row label {
  width:23px;
  padding-left: 1px;
  font-size: 18px;
}
.product-main-body .mui-input-row .mui-input-clear {
  width:93%;
  font-size: 22px;
}
.product-main-body .data-list {
  background: #fff;
  width: 100px;
  position: absolute;
  z-index: 10;
  border: 1px solid #E9E9E9;
}
.product-main-body .data-list  .mui-table-view-cell{
  display: block;
  text-align: center;
  margin-left: -5px;
}

.mui-table-view .mui-table-view-cell{
     width: 105%;
     margin-left: -15px;
    /* display: block; */
    padding-left:25px;
     padding-right:30px;
  }
/* ==================== */
  .product-safe-info{
    margin:2rem 0;

  }
  .product-safe-info > span:first-child >img {
    border: 0;
    height: 16px;
    position: relative;
    top: 0.2rem;
  }

  .product-safe-info > span {
    display: inline-block;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
  }
  .product-safe-info > span:first-child {
    border: 1px solid green;
    width: 70px;
    color: green;
    position: relative;
  }
  .product-safe-info > span:last-child {
    width: 90px;
    border: 1px solid #908b8b;
    color: #908b8b;
    margin-left: 1rem;
  }
  /* 顶部 */
  .product-main {
    text-align: initial;
    overflow-y: auto;
  }
  .product-main-header {
    display: flex;
    align-items: center;
    border-top: 1px solid #f1ecec;
    border-bottom: 1px solid #f1ecec;
    padding: 0.5rem 1rem;
    background: #FFFFFF;
  }
  .product-main-header-info {
    margin-left: 0.7rem;
  }
  .product-main-header-info>div:first-child {
    font-size: 24px;
    color: black;
    font-weight: bold;
    height: 50%;
    line-height: 2rem;
  }
  .product-main-header-info>div:last-child {
    height: 50%;
    line-height: 2rem;
    font-size: 18px;
  }
  .product-main .product-main-header img {
    width:4.5rem;
    height: 4.5rem;
    padding: 0.3rem 0;
  }
</style>
